<template>
  <div class="cloud-service">

     <Tabs value="name1">
        <TabPane label="全部" name="name1">
          <div class="text-center wrap">
              <Row>
                <Col :span="6" v-for="(item , index) in list" :key="index">
                  <div class="box">
                    <div class="title">{{item.name}}</div>
                    <div class="status">
                      <span v-if="item.status == '已购买'">{{item.status}}</span>
                      <Button v-else type="primary" size="small" @click="$router.push('/admin/agent/productBuy?id=103232')">{{item.status}}</Button>
                    </div>
                    <div class="price">价格:{{item.price}}元</div>
                  </div>
                </Col>
              </Row>
          </div>
        </TabPane>
        <TabPane label="软件" name="name2">
          <div class="text-center wrap">
              <Row>
                <Col :span="6" v-for="(item , index) in list" :key="index">
                  <div class="box">
                    <div class="title">{{item.name}}</div>
                    <div class="status">
                      <span v-if="item.status == '已购买'">{{item.status}}</span>
                      <Button v-else type="primary" size="small">{{item.status}}</Button>
                    </div>
                    <div class="price">价格:{{item.price}}元</div>
                  </div>
                </Col>
              </Row>
          </div>
        </TabPane>
        <TabPane label="硬件" name="name3">硬件硬件</TabPane>
    </Tabs>
    
  </div>
</template>

<script>
export default {
  mounted () {
    this.$store.commit('UPDATE_POSITION', this.position)
  },
  data (){
    return {
      position:[
        {title: '云服务'}
      ],
      list:[
        {
          name: '云课堂通用版',
          price: 'xxxx',
          status: '立即购买'
        },
        {
          name: '云课堂教育局版',
          price: 'xxxx',
          status: '已购买'
        },
        {
          name: '云课堂学校版',
          price: 'xxxx',
          status: '已购买'
        },
        {
          name: '智能终端',
          price: 'xxxx',
          status: '已购买'
        },
        {
          name: '云课堂通用版',
          price: 'xxxx',
          status: '已购买'
        },
        {
          name: '云课堂通用版',
          price: 'xxxx',
          status: '已购买'
        },
        
      ]
    }
  },
  methods:{
    
  }
}
</script>

<style lang="less" scoped>
  .wrap{
    padding: 20px 0;
  }
  .box{
    text-align: center;
    width: 200px;
    margin: auto;
    height: 270px;
    background: url(../../assets/images/admin/boxbg.png) no-repeat;
    background-size: contain;
    .title{
      padding-top: 20px;
    }
    .status{
      padding-top: 154px;
    }
    .price{
      padding-top: 20px;
    }
  }
</style>
